<template>
	<tm-app ref="app">
		<tm-avatar class="btnImg" :size="160" :round="20" :img="avatarUrl"></tm-avatar>

		<tm-sheet style="margin-top: 50rpx;">
			<tm-input v-model="nickname" prefix="tmicon-user-fill" placeholder="username"></tm-input>
			<tm-input v-model="password" :margin="[0, 24]" password placeholder="password"
				prefix="tmicon-lock-fill"></tm-input>
			<tm-input v-model="repassword" :margin="[0, 24]" password placeholder="confirm password"
				prefix="tmicon-lock-fill"></tm-input>
			<tm-input v-model="email" :margin="[0, 24]" placeholder="email" prefix="tmicon-mail"></tm-input>
		</tm-sheet>
		<view class="flex flex-row flex-wrap">
			<tm-button style="margin-left: 130rpx;" color="red" :linear-color="['#ea3c2d', '#ea3c2d']" :margin="[10]"
				:shadow="0" size="normal" label="save" @click="checkUserinfo()"></tm-button>
			<tm-button color="black" :linear-color="['#FFFFFF', '#FFFFFF']" :margin="[10]" :shadow="0" size="normal"
				label="back" @click="backPage()"></tm-button>
		</view>
		<tm-message ref="msg" :lines="5"></tm-message>
	</tm-app>
</template>


<script lang="ts" setup>
	import { ref, reactive, toRefs, nextTick } from "vue"
	import { onLoad } from "@dcloudio/uni-app"
	import tmMessage from "@/tmui/components/tm-message/tm-message.vue"
	import { wxLogin } from '@/api/auth'


	const nickname = ref('')
	const password = ref('')
	const repassword = ref('')
	const email = ref('')
	const avatarUrl = ref('http://www.tkgwu.com/img/lo.jpg')
	const btnflag = ref(true)
	const code = ref('')
	const placement = ref('top')
	const msg = ref<InstanceType<typeof tmMessage> | null>(null)
	const data = reactive({
		userInfo: {}
	})


	const { userInfo } = toRefs(data);

	onLoad(() => {
		nickname.value = '';
	})


	function onChooseavatar(e : any) {
		avatarUrl.value = e.detail.avatarUrl;
		btnflag.value = true;
	}

	function checkUserinfo() {
		if (nickname.value === '') {
			msg.value.show({ model: 'error', text: 'username is not null！' })
			return false;
		}

		if (password.value === '') {
			msg.value.show({ model: 'error', text: 'password is not null！' })
			return false;
		}
		
		if (repassword.value === '') {
			msg.value.show({ model: 'error', text: 'repassword is not null！' })
			return false;
		}
		
		if (email.value === '') {
			msg.value.show({ model: 'error', text: 'email is not null！' })
			return false;
		}
		
		if (password.value !== repassword.value) {
			msg.value.show({ model: 'error', text: 'The two passwords are different！' })
			return false;
		}

		saveEntity();
		return true;
	}



	const saveEntity = async () => {
		let param = { "nickname": nickname.value, "password": password.value, "mobile": email.value };
		const result = await wxLogin(param);
		uni.setStorageSync("userid", result.userInfo.id);
		backLogin();
	}

	function backLogin(){
		uni.redirectTo({
			url: '/pages/auth/auth'
		})
	}

	function backPage() {
		uni.redirectTo({
			url: '/pages/index/index'
		})
	}
</script>

<style>
	.btnCss {
		background-color: orange;
		color: #FFF;
		height: 80rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.btnImg {
		margin-top: 50rpx;
		margin-left: 40%;
	}
</style>